<template>
	<view class="wallet">
		<view class="balance">
			<view class="available">
				<view class="text">可用余额</view>
				<view class="money">
					<text style="font-size: 28rpx;">￥</text>
					<text style="font-size: 48rpx;">{{ amount || 0.00 }}</text>
				</view>
			</view>
			<view>
				<button class="money-btn" @click="goRecharge">充值</button>
			</view>
		</view>
		<view class="money-list">
			<view
				class="money-item"
				v-for="(item, index) in moneyList"
				:key="index"
				@click="goItem(item)"
			>
				<image class="money-img" :src="localIconSrc(item.name)"></image>
				<view class="money-text">{{ item.text }}</view>
			</view>
		</view>
		<view class="bill">
			<view class="bill-text">消费账单</view>
			<!-- 日期选择 -->
			<view class="uni-list-cell-db">
				<picker
				mode="date"
				:value="time"
				:end="endDate"
				@change="bindDateChange">
					<view class="picker">
						{{ time }}
						<uni-icons type="down" size="14"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<view class="bill-detail">
			<!-- <view> -->
				<!-- <view class="bill-item">
					<view class="item-text">{{ item.text }}</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">-￥</text>
						<text>2.3</text>
					</view>
				</view>
				<view class="line" v-if="index!== billList.length-1"></view> -->
				<view class="bill-item">
					<view class="item-text">颜料兑换</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">-￥</text>
						<text>{{ pigmentExchange || '0.00' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bill-item">
					<view class="item-text">现金支出</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">-￥</text>
						<text>{{ cash || '0.00' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bill-item">
					<view class="item-text">欠费金额</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">-￥</text>
						<text>{{ arrears || '0.00' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bill-item">
					<view class="item-text">代金券抵扣</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">-￥</text>
						<text>{{ voucher || '0.00' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bill-item">
					<view class="item-text">消费总计</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">-￥</text>
						<text>{{ totalConsumption || '0.00' }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bill-item">
					<view class="item-text">退款</view>
					<view class="item-cash">
						<text style="font-size: 24rpx;">+￥</text>
						<text>{{ refund || '0.00' }}</text>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import { getAllInTotal } from '@/api/wallet.js'
	import { getUserInfo } from '@/api/login.js'
	export default {
		data() {
			const time = this.getDate({
				format: true
			})
			return {
				amount: '',
				moneyList: [
					{ img: '', text: '收支明细', index: '1', name: 'shouzhi.png' },
					{ img: '', text: '代金券', index: '2', name: 'daijinquan.png' },
					{ img: '', text: '发票管理', index: '3', name: 'fapiao.png' },
					{ img: '', text: '续费管理', index: '4', name: 'xufei.png' },
				],
				time: time,
				refund: '',
				cash: '',
				arrears: '',
				voucher: '',
				totalConsumption: '',
				pigmentExchange: '',
				endDate: '',
				
			}
		},
		onLoad(param) {
			console.log('param', param);
			// this.amount = param.param;
			const today = new Date();
			const year = today.getFullYear();
			const month = (today.getMonth() + 1).toString().padStart(2, '0');
			const day = today.getDate().toString().padStart(2, '0');
			this.endDate = year + '-' + month + '-' + day
			console.log('this.endDate', this.endDate)
		},
		onShow() {
			this.getList();
			this.getUser()
		},
		methods: {
			getUser() {
				const accessToken = uni.getStorageSync('acctoken')
				const openid = uni.getStorageSync('openid')
				let useStr = {
					"access_token": accessToken,
					"appid": '073820240321128890',
					"openid": openid
				}
				console.log('useStr', useStr)
				getUserInfo(useStr).then(res => {
					console.log('res', res)
					const { amount } = res
					this.amount = amount
				})
			},
			getList() {
				let data = {
					time: this.time
				};
				getAllInTotal(data).then(res => {
					if (res.data) {
					  const { refund, cash, arrears, voucher, total_consumption, pigment_exchange } = res.data;
						this.refund = refund;
						this.cash = cash;
						this.arrears = arrears;
						this.voucher = voucher;
						this.totalConsumption = total_consumption;
						this.pigmentExchange = pigment_exchange
					}
				})
			},
			goItem(item) {
				if (item.index === '1') {
					uni.navigateTo({
						url: '/pages/incomExpend/index'
					})
				} else if (item.index === '3') {
					uni.navigateTo({
						url: '/pages/receiptManage/index'
					})
				}
				if (item.index === '2') {
					uni.navigateTo({
						url: `/pages/nodata/nodata`
					})
				} else if (item.index === '4') {
					uni.navigateTo({
						url: '/pages/nodata/nodata?type=2'
					})
				}
			},
			goRecharge() {
				uni.navigateTo({
					url: `/pages/recharge/index?money=${this.amount}`
				})
			},
			bindDateChange(e) {
				this.time = e.detail.value
				this.getList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
						year = year - 60;
				} else if (type === 'end') {
						year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.wallet {
		margin: 40rpx 36rpx;
	}
	.balance {
		background-image: $balance-bg1;
		background-size: 100% 100%;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.text {
			font-size: #{$text-size};
			color: #{$one-title-color};
			margin-bottom: 20rpx;
		}
		.money {
			color: #{$main-color};
		}
		.money-btn {
			background: #{$main-color};
			color: #fff;
			border-radius: 40rpx;
			height: 66rpx;
			line-height: 66rpx;
			font-size: #{$text-size};
		}
	}
	.money-list {
		background: #fff;
		margin-top: 40rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.money-item {
			text-align: center;
			padding: 40rpx 0;
			.money-img {
				width: 48rpx;
				height: 48rpx;
			}
			.money-text {
				font-size: #{$text-size};
				color: #{$one-title-color};
				margin-top: 16rpx;
			}
		}
	}
	.bill {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: #{$text-size};
		color: #{$one-title-color};
		.bill-text {
			font-size: #{$text-size};
			color: #{$one-title-color};
		}
	}
	.bill-detail {
		background: #fff;
		margin-top: 26rpx;
		border-radius: 16rpx;
		padding: 30rpx 32rpx;
		.bill-item {
			display: flex;
			justify-content: space-between;
			font-size: #{$text-size};
			color: #{$one-title-color};
		}
	}
	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 30rpx 0;
	}
</style>